<style lang="scss" scoped></style>

<template>
  <section>
    <el-button
      type="primary"
      v-permission="{ action: 'add' }"
      @click="handleGoTo('USER_EDIT')"
      >添加</el-button
    >

    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="id" prop="id"> </el-table-column>

      <el-table-column label="姓名" prop="name"> </el-table-column>

      <el-table-column label="地址" prop="address"> </el-table-column>

      <el-table-column label="日期" prop="date"> </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            v-permission="{ action: 'details' }"
            @click="handleGoTo('USER_DETAILS', scope.row)"
            >详情</el-button
          >
          <el-button
            size="mini"
            type="warning"
            v-permission="{ action: 'edit' }"
            @click="handleGoTo('USER_EDIT', scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            v-permission="{ action: 'delete' }"
            @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </section>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: 1,
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          id: 2,
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          id: 3,
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          id: 4,
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },
  methods: {
    /**
     * 跳转页面
     */
    handleGoTo(name, row = {}) {
      console.log(11, row);
      this.$router.push({
        name,
        query: {
          id: row.id,
        },
      });
    },

    /**
     * 删除用户
     */
    handleDelete(row) {
      console.log(row);
    },
  },
};
</script>
